.box {
    width: 400px;
    height: 400px;
    /* background-color: aqua; */
    /* 背景色 */
    /* background-color: #999; */
    /* background-image: url("./../img/news02.jpg"); */
    border: 2px solid red;
    /* 
        repeat  默认值 重复
         no-repeat  不重复
         repeat-x  水平方向重复
        repeat-y 垂直方向重复
    */
    /* background-repeat: no-repeat; */
    /* background-position: right 20px bottom 40px; */
    /* background-position: 50% 50%; */
    /* background-position: 20px 200px; */
    /* css3新增的属性 */
    /* background-size: 200px 150px; */
    /* background-size: 600px; */
    /* 等比例缩放 直到把整个盒子全部充满为止*/
    /* background-size: cover; */
    /* 等比例缩放 直到把某一边充满为止 */
    /* background-size: contain; */
    /* background-size: 50% 80%; */

    background: url("./../img/news02.jpg") 300px 20px no-repeat;
    background-size: 150px 150px;
}


nav {
    width: 600px;
    height: 40px;
    background-color: papayawhip;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

nav>a>span {
    /* 定视口 */
    display: inline-block;
    width: 20px;
    height: 20px;
    /* 插图片 */
    background-image: url('../img/icon.png');
    vertical-align: middle;
    margin: 20px;
}

.sprite1 {
    background-position: -22px 0;
}

.sprite2 {
    background-position: 0 -20px;
}

.sprite3 {
    height: 22px;
    background-position: -22px -80px;
}

a {
    /* 垂直方向不生效 */
    margin: 10px;
    /* 生效，但不对周围元素造成影响 */
    padding: 20px;
}

input {
    outline: none;
    border: red solid;
}





/* ===== 渐变 ===== 
1.线性渐变
2.径向渐变
*/

.box1 {
    border: 2px solid;
    width: 400px;
    height: 400px;
    /* 通过left top right bottom调整渐变方向 */
    background-image: linear-gradient(pink, purple);
    background-image: linear-gradient(to right top, pink, purple, red);
    /* 直接定义渐变角度方向 */
    background-image: linear-gradient(-120deg, skyblue, blue);
    /* 实线过渡效果 */
    background-image:
        linear-gradient(to right,
            pink 0 100px, purple 100px 200px,
            pink 200px 300px, purple 300px 400px);

    /* 重复效果 */
    background-image:
        repeating-linear-gradient(to right, transparent 0 10px, purple 10px 20px),
        repeating-linear-gradient(to bottom, transparent 0 10px, pink 10px 20px);
}


.box2 {
    width: 100px;
    height: 200px;
    border: 2px solid;
    margin: 100px auto;
    box-shadow: 10px 10px red, -10px -10px green;
}

.box3 {
    width: 400px;
    height: 50px;
    background-image: repeating-linear-gradient(135deg, green 0 10px, transparent 10px 20px);
}


.box4 {
    width: 400px;
    height: 200px;
    /* 渐变开始的中心位置   盒子的中心
     渐变的形状 默认椭圆 ellipse  circle
    */
    background-image: 
    radial-gradient(circle at 50% 80%,yellow, green);

    /* 颜色出现的范围 */
    background-image: 
    radial-gradient(circle at 20% 0,yellow 0 50px,orange 100px);

    /* 定义圆的大小 */
    background-image: radial-gradient(circle 100px,yellow,green);

    /* 重复 */
    /* background-image: repeating-radial-gradient(); */
}